<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"  %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<form role="form" data-toggle="validator" id="form" name="form" >

<c:set var="docu_type" value="W" />
<c:if test="${not empty customerMap}">
	<c:set var="docu_type" value="M" />
	<div id="modal-title" style="display:none;">${customerMap.COMPANY_NAME} (${customerMap.CUS_ID})</div>
</c:if>
<input type="hidden" id="docu_type" name="docu_type" value="${docu_type}" />
<div class="row">
	<div class="col-lg-12">
		
		<div class="panel panel-default">
			<div class="panel-heading">
            	거래처 정보
			</div>
			<div class="panel-body">
				<div class="row">
					<div class="col-lg-4">
						<div class="form-group">
						   <label class="control-label">거래처 구분</label>
						   <select class="form-control" id="type" name="type"
						   								data-error="거래처 형태를 선택해주세요." 
						   								required="required">
						   		<option value="" disabled selected>선택</option>
                               <c:forEach items="${cusTypeList}" var="list">
                               	<option <c:if test="${customerMap.TYPE eq list.CODE}">selected="selected"</c:if> value="${list.CODE}">${list.NAME}</option>
                               </c:forEach>
                           </select>
                           <div class="help-block with-errors">&nbsp;</div>
						</div>
						
						<div class="form-group">
						    <label class="control-label">* 거래처명</label>
						    <input type="text" class="form-control" id="company_name" name="company_name" value="${customerMap.COMPANY_NAME}"
						    										maxlength=16
						    										data-error="거래처명을 입력해주세요."
						    										required="required">
						    <div class="help-block with-errors">16자 이내로 작성</div>
						</div>
						<div class="form-group">
						    <label class="control-label">* 사업자번호</label>
						    <input type="text" class="form-control" id="biz_number" name="biz_number" value="${customerMap.BIZ_NUMBER}"
						    										<c:if test="${empty customerMap}">
						    										readonly="readonly"
						    										</c:if>
					    											pattern="[0-9]{3}\-[0-9]{2}\-[0-9]{5}"
					    											data-remote="/customer/bizNumberDuplicateCheck.ur"
					    											data-remote-error="등록된 사업자번호 입니다."
					    											required="required">
						    <div class="help-block with-errors" id="biz_number_comment"><c:if test="${empty customerMap}">거래처 구분을 먼저 선책</c:if><c:if test="${not empty customerMap}">ex) 123-45-67890</c:if></div>
						</div>
						<div class="form-group">
						    <label class="control-label">사업 종류</label>
						    <input type="text" class="form-control" id="category" name="category" value="${customerMap.CATEGORY}"
						    										maxlength=64>
						    <div class="help-block with-errors">64자 이내로 작성</div>
						</div>
					</div>
					<div class="col-lg-4">
						<div class="form-group">
						    <label class="control-label">개업일</label>
						   	<div class='input-group date' id='div_company_birth'>
						   		<input type='text' class="form-control readonly" id="company_birth" name="company_birth" value="${customerMap.COMPANY_BIRTH}"
						   												maxlength=10>
						   		<span class="input-group-addon">
						   			<i class="glyphicon glyphicon-calendar"></i>
								</span>
						   	</div>
						   	<div class="help-block with-errors">&nbsp;</div>
						</div>
						<div class="form-group">
						    <label class="control-label">* 담당자명</label>
						    <input type="text" class="form-control" id="charge_name" name="charge_name" value="${customerMap.CHARGE_NAME}"
						    										maxlength=32
						    										data-error="담당자명을 입력해주세요."
						    										required="required">
						    <div class="help-block with-errors">32자 이내로 작성</div>
						</div>
						<div class="form-group">
						    <label class="control-label">담당자 생일</label>
						   	<div class='input-group date' id='div_charge_birth'>
						   		<input type='text' class="form-control readonly" id="charge_birth" name="charge_birth" value="${customerMap.CHARGE_BIRTH}"
						   												maxlength=10>
						   		<span class="input-group-addon">
						   			<i class="glyphicon glyphicon-calendar"></i>
								</span>
						   	</div>
						   	<div class="help-block with-errors">&nbsp;</div>
						</div>
						
                        <div class="form-group">
							<label class="control-label">휴대 전화</label>
	                        <div class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span>
                                <input type="tel" class="form-control"  id="phone_1" name="phone_1" value="${customerMap.PHONE_1}"
                                										pattern="^\d{3}-\d{3,4}-\d{4}$">
                            </div>
                            <span class="help-block with-errors">ex) 010-1234-5678</span>
                        </div>
					</div>
					<div class="col-lg-4">
						<div class="form-group">
							<label class="control-label">회사 전화</label>
	                        <div class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
                                <input type="tel" class="form-control"  id="phone_2" name="phone_2" value="${customerMap.PHONE_2}"
                                										pattern="^\d{2,3}-\d{3,4}-\d{4}$">
                            </div>
                            <span class="help-block with-errors">ex) 02-123-4567</span>
                        </div>
						<div class="form-group">
							<label class="control-label">팩스</label>
	                        <div class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon glyphicon-phone-alt"></i></span>
                                <input type="tel" class="form-control"  id="fax" name="fax" value="${customerMap.PHONE_1}"
                                										pattern="^\d{3}-\d{3,4}-\d{4}$"
                                										required="required">
                            </div>
                            <span class="help-block with-errors">ex) 070-1234-5678</span>
                        </div>
						<div class="form-group">
							<label class="control-label">* 이메일</label>
							<div class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
		                        <input type="email" class="form-control" id="email" name="email" value="${customerMap.EMAIL}"
		                        										 required="required">
                            </div>
		                    <span class="help-block with-errors">ex) abc@gmail.com</span>
                        </div>
                        
						<div class="form-group">
						    <label class="control-label">* 거래처 ID</label>
						    <input type="text" class="form-control" id="cus_id" name="cus_id" placeholder="자동 생성" value="${customerMap.CUS_ID}"
						    										readonly="readonly">
						    <div class="help-block with-errors">등록시 자동 생성</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-lg-12">
						<div class="form-group">
							<label>메모</label>
							<textarea class="form-control" rows="3" id="memo" name="memo">${customerMap.MEMO}</textarea>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="panel panel-success">
			<div class="panel-heading">
            	계좌 정보
			</div>
			<div class="row">
				<div class="panel-body">
					<div class="col-lg-3">
						<div class="form-group">
							<label class="control-label">은행명</label>
						    <input type="text" class="form-control" id="account_bank" name="account_bank" value="${customerMap.ACCOUNT_BANK}"
						    										maxlength=32>
						</div>
					</div>
					<div class="col-lg-6">
						<div class="form-group">
							<label class="control-label">계좌번호</label>
						    <input type="text" class="form-control" id="account_number" name="account_number" value="${customerMap.ACCOUNT_NUMBER}"
						    										maxlength=32>
						</div>
					</div>
					<div class="col-lg-3">
						<div class="form-group">
							<label class="control-label">예금주</label>
						    <input type="text" class="form-control" id="account_holder" name="account_holder" value="${customerMap.ACCOUNT_HOLDER}"
						    										maxlength=32>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="row">
	<div class="col-lg-12" style="text-align:center;">
		<c:choose>
			<c:when test="${empty customerMap}">
				<button type="submit" class="btn btn-success" 
									  data-toggle="confirmation" 
									  title="<spring:message code='comm.write.confirm' />" 
									  data-btn-ok-label="<spring:message code='comm.btn.continue' />"
									  data-btn-cancel-label="<spring:message code='comm.btn.cancle' />">등록</button>
			</c:when>
			<c:otherwise>
				<button type="submit" class="btn btn-primary"
									  data-toggle="confirmation" 
									  title="<spring:message code='comm.modify.confirm' />" 
									  data-btn-ok-label="<spring:message code='comm.btn.continue' />"
									  data-btn-cancel-label="<spring:message code='comm.btn.cancle' />">수정</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">닫기</button>
			</c:otherwise>
		</c:choose>
	</div>
</div>
		
	<script type="text/javascript">
		$('#div_company_birth').datepicker({
			autoclose: true,
		    format: "yyyy-mm-dd",
		    language: "kr",
		    todayHighlight: true,
		    toggleActive: true
		});
		
		$('#div_charge_birth').datepicker({
			autoclose: true,
		    format: "yyyy-mm-dd",
		    language: "kr",
		    todayHighlight: true,
		    toggleActive: true
		});
		
		
	</script>
	
	
</form>
				


<script type="text/javascript">

	$('#type').on('change', function() {
		$('#biz_number').data("remote", "/customer/bizNumberDuplicateCheck.ur?type=" + $(this).val() + "&cus_id=${customerMap.CUS_ID}");
		$('#biz_number').prop("readonly", false);
		$('#biz_number_comment').html("ex) 123-45-67890");

	});
	
	$(document).ready(function() {
		
		$('[data-toggle=confirmation]').confirmation();
		
		$('#form').validator().on('submit', function(e) {
			if (e.isDefaultPrevented()) {
				bs_alert.modal("<spring:message code='comm.field.empty.error' />", "info");
			} else {
				
				e.preventDefault();
				
				var url = "/customer/submitRegister.ur";
				var action_flag = "RELOAD";
				<c:if test="${not empty customerMap}">
					url = "/customer/submitModify.ur";
					action_flag = "LIST";
				</c:if>
					
				$.ajax({
			        url: url,
			        type: "POST",
			        data: $(this).serializeArray(),
			        success: function(data, status, xhr) {
						switch(data) {
							case 0 : 
								bs_alert.modal("<spring:message code='comm.modify.success' />", "success", action_flag);
								break;
							case 9 : 
								bs_alert.modal("<spring:message code='comm.request.data.error' />", "warning", action_flag);
								break;
							case 1 :
								bs_alert.modal("<spring:message code='comm.db.modify.error' />", 'warning', action_flag);
								break;
							case 8 :
								bs_alert.modal("<spring:message code='comm.unknown.error' />", 'warning', action_flag);
								break;
						}
			        },
			        error: function(xhr, status, err) {
			            // do the error stuff
			        }
			    });
				
			}
		});
	});
	
	
</script>